// This file holds all geometry for the Zettlr toolbar

#toolbar {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:@toolbar-height;
    padding:0;
    display:flex;
    align-items:center;

    // We don't have window chrome, so we need the toolbar to be draggable.
    -webkit-app-region: drag;

    & > .searchbar, & > .file-info, & > .button, & > svg:not(#search-progress-indicator) {
      -webkit-app-region: no-drag;
    }

    .button {
        flex-grow:0.1;
        outline: 0;
        display:inline-block;
        width:@button-size;
        margin:@button-margin;
        border-radius:@border-radius; // Control the radius with the margin var
        text-align:center;
        line-height:@button-size;
        font-family: @font-icon;
        font-size:@font-size-small * 0.8;

        &:first-child { margin-left:@toolbar-margin * 2; }
        &:last-child { margin-right:@toolbar-margin * 2; }

        &.menu-popup::before         { content: "\f127"; }
        &.dir-open::before           { content: "\f73e"; }
        &.file-new::before           { content: "\002b"; }
        &.stats::before              { content: "\f6b8"; }
        &.tag-cloud::before          { content: "\f482"; }
        &.preferences::before        { content: "\f00f"; }
        &.file-save::before          { content: "\f0c8"; }
        &.file-delete::before        { content: "\f0ce"; }
        &.file-rename::before        { content: "\f5d4"; }
        &.formatting::before         { content: "\f4e8"; }
        &.find::before               { content: "\f0c5"; }
        &.share::before              { content: "\f16c"; }
        &.show-toc::before           { content: "\f68c"; }
        &.toggle-attachments::before { content: "\f285"; } // Alternative: '\f284' and '\f286'

        // Pomodoro meter
        &.pomodoro {
            padding:2px;
            // Don't display as button
            background-image:none;
            border:none;

            svg {
                transform: rotate(-90deg);
                display: inherit;
                margin: 0 auto;
            }
        }
    }

    .spacer { flex-grow:5; }

    .separator {
        flex-grow:0.3;
        width:1px;
        text-align:center;

        &:before {
            content: "|";
            display:inline;
            font-size:@font-size-big;
        }
    }

    .file-info {
        flex-grow:5;
        text-align:center;
        line-height:@toolbar-height;
        white-space: nowrap;
        overflow-x: hidden;
    }

    .searchbar {
        flex-grow:5;
        input {
            height:@button-size;
            width:90%; // Fill out the whole space
            line-height:@button-size;
            padding:0.2em 1em;
            margin:@button-margin;
            border-radius:@button-margin;
            outline: none;
        }

        div.end-search {
            position: relative;
            right: 26px;
            width: 0px; // 0px will ensure it stays on the input in all sizes
            height: 12px;
            display: inline-block;
            line-height: 11px;
            font-size: 80%;
            text-align: center;
        }
    }
}

// For macOS, we need to add some more margin
body.darwin #toolbar {
  padding-left: 70px;
}

// For Windows and Linux the same, only on the other side
body.win32 #toolbar, body.linux #toolbar {
  padding-right: 140px; // Windows window controls are ... huge.
}
